// 60FPS
// 1000/60 =16.666666666666
// 一帧就是16.6ms。如果超过这个时间，人眼看起来就会比较卡顿

// 浏览器要做以下这些事情
// 1.处理用户的事件，就是event。例如click,input,change等
// 2.执行定时器任务
// 3.执行requestAnimationFrame
// 4.执行dom的回流和重绘
// 5.计算更新图层的绘制指令
// 6.绘制指令合并主线程。如果有空余时间会执行requestIdleCallback


// 第二种情况
// 没有任务执行的时候,浏览器会有50ms空闲时间，这个时间段也会执行requestIdleCallback

requestIdleCallback(function (deadline) {
    console.log(deadline.timeRemaining())
})


// react相关人员调用requestIdleCallback是有可能20ms执行的，所以搞了一个polyfill
// react16 用postMessage + requestAnimationFrame 实现polyfill。
// 为什么使用postMessage，而不是setTimeout? 因为setTimeout有4ms延迟,而postMessage是0延迟
// react18 用MessageChannel实现polyfill
let {port1, port2} = new MessageChannel()
// onmessage隐式开启start
port1.onmessage = function (e) {
    console.log('收到了port2的消息', e)
}

port2.onmessage = function (e) {
    console.log('收到了port1的消息', e)
}

port1.postMessage('hello')
port2.postMessage('world')